<template>
	<view class="main">
		<view class="navi-bar">
			<image src="../../static/icons/yj.png" mode="heightFix"></image>
		</view>
		<!-- <u-gap height="100" bgColor="#fff"></u-gap> -->
		<view class="user-top">
			<image class="user-bg" :src="UserList.background" mode="aspectFill"></image>
			<view class="user-info">
				<image :src="UserList.web_url" mode=""></image>
				<view class="user-name">
					{{UserList.user_name}}
				</view>
			</view>
		</view>
		<view class="user-collect">
			<view class="col-title">
				我的收藏
			</view>
			<view class="col-item">
				<view class="" @click="naviToCollectDaily">
					<image src="../../static/icons/rq.png" mode=""></image>
					日签
				</view>
				<view class="" @click="naviToCollectRead">
					<image src="../../static/icons/yd.png" mode=""></image>
					阅读
				</view>
				<view class="" @click="naviToCollectQuestion">
					<image src="../../static/icons/wd.png" mode=""></image>
					问答
				</view>
				<view class="" @click="naviToCollectLong">
					<image src="../../static/icons/cp.png" mode=""></image>
					长篇
				</view>
				<view class="" @click="naviToCollectRadio">
					<image src="../../static/icons/syj.png" mode=""></image>
					收音机
				</view>
			</view>
		</view>
		<view class="user-follow" @click="naviToFollow">
			<view class="">
				我的关注
			</view>
			<view class="">
				<!-- {{getFollowNum()}} > -->
				>
			</view>
		</view>
		<view class="user-follow" @click="naviToFeedBack">
			<view class="">
				意见与反馈
			</view>
			<view class="">
				<!-- {{getFollowNum()}} > -->
				>
			</view>
		</view>
		<view class="user-follow" @click="naviToUserProtocol">
			<view class="">
				用户协议
			</view>
			<view class="">
				<!-- {{getFollowNum()}} > -->
				>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '../../untils/http.js'
	
	const url = 'user/info/8878093'
	
	export default {
		data() {
			return {
				UserList: [],
				Follows:[]
			}
		},
		created() {
			http(url).then(res => {
				this.UserList = res.data
				console.log(this.UserList);
			})
		},
		methods: {
			naviToFollow() {
				uni.navigateTo({
					url: '../UserFollows/UserFollows'
				})
			},
			naviToFeedBack() {
				uni.navigateTo({
					url: '../FeedBack/FeedBack'
				})
			},
			naviToUserProtocol() {
				uni.navigateTo({
					url: '../UserProtocol/UserProtocol'
				})
			},
			naviToCollectDaily() {
				uni.navigateTo({
					url: '../UserCollectDaily/UserCollectDaily'
				})
			},
			naviToCollectRead() {
				uni.navigateTo({
					url: '../UserCollectRead/UserCollectRead'
				})
			},
			naviToCollectQuestion() {
				uni.navigateTo({
					url: '../UserCollectQuestion/UserCollectQuestion'
				})
			},
			naviToCollectLong() {
				uni.navigateTo({
					url: '../UserCollectLong/UserCollectLong'
				})
			},
			naviToCollectRadio() {
				uni.navigateTo({
					url: '../UserCollectRadio/UserCollectRadio'
				})
			}
			// getFollowNum() {
			// 	http('user/follow_list?uid=8878093&last_id=0&type=0').then(res => {
			// 		this.Follows = res.data
			// 	})
			// 	return this.Follows.length
			// }
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}
	
	.main {
		background-color: #f1f1f1;
		width: 750rpx;
		height: 1235rpx;
	}
	
	.navi-bar {
		padding: 10px 0;
		position: fixed;
		display: flex;
		flex-direction: row-reverse;
		width: 750rpx;
		height: 100rpx;
		// background-color: #fff;
		z-index: 1000;
		
		image {
			margin-right: 10px;
			height: 100%;
		}
	}
	
	.user-top {
		position: relative;
		width: 750rpx;
		height: 350rpx;
		overflow: hidden;
		
		.user-bg {
			width: 100%;
		}
		
		.user-info {
			margin-left: 10px;
			position: absolute;
			display: flex;
			align-items: center;
			top: 50%;
			left: 0;
			
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 999px;
				border: 1px solid #fff;
			}
			
			.user-name {
				margin-left: 10px;
				font-size: 12px;
				color: #fff;
			}
		}
	}
	
	.user-collect {
		margin-bottom: 10px;
		padding: 10px;
		background-color: #fff;
		
		.col-title {
			font-size: 14px;
		}
		
		.col-item {
			margin-top: 10px;
			display: flex;
			justify-content: space-evenly;
			font-size: 12px;
			color: #878787;
			
			image {
				width: 100%;
				height: 70rpx;
			}
		}
	}
	
	.user-follow {
		padding: 20px 10px;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		color: #515151;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}
</style>
